<template>
    <div ref="chart" class="chart-container"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    props: {
      data: {
        type: Array,
        required: true
      }
    },
    mounted() {
      this.drawChart();
    },
    methods: {
      drawChart() {
        const chart = echarts.init(this.$refs.chart);
        chart.setOption({
          tooltip: {},
          xAxis: {
            type: 'category',
            data: this.data.map(item => item.name)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              type: 'bar',
              data: this.data.map(item => item.value)
            }
          ]
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .chart-container {
    width: 100%;
    height: 400px;
  }
  </style>
  